<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>热力图</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script include="jquery" src="./static/libs/include-lib-local.js"></script>
  <script include="mapv" src="./static/libs/include-cesium-local.js"></script>
  <!--引用示例页面样式表-->
  <link rel="stylesheet" href="./static/demo/cesium/style.css" />
</head>

<body>
  <div id="GlobeView"></div>
  <script>
    var webGlobe = new Cesium.WebSceneControl("GlobeView", {
      terrainExaggeration: 1,
    });
    var blueImage = new Cesium.UrlTemplateImageryProvider({
      url:
        "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
      tilingScheme: new Cesium.WebMercatorTilingScheme(),
      maximumLevel: 12,
    });
    webGlobe.viewer.imageryLayers.addImageryProvider(blueImage);

    var map = webGlobe.viewer;

    initMap();
    initMapv();

    function initMap() {
      var center = Cesium.Cartesian3.fromDegrees(114, 30, 5000000.0);
      map.scene.camera.setView({
        destination: center,
      });
    }

    function initMapv() {
      var MapvContainer = document.getElementById("mapvContainer");
      var randomCount = 1000;
      var data = [];
      var citys = [
        "北京",
        "天津",
        "上海",
        "重庆",
        "石家庄",
        "太原",
        "呼和浩特",
        "哈尔滨",
        "长春",
        "沈阳",
        "济南",
        "南京",
        "合肥",
        "杭州",
        "南昌",
        "福州",
        "郑州",
        "武汉",
        "长沙",
        "广州",
        "南宁",
        "西安",
        "银川",
        "兰州",
        "西宁",
        "乌鲁木齐",
        "成都",
        "贵阳",
        "昆明",
        "拉萨",
        "海口",
      ];
      // 构造数据 将数据处理成对应的geojson格式
      while (randomCount--) {
        var cityCenter = mapv.utilCityCenter.getCenterByCityName(
          citys[parseInt(Math.random() * citys.length)]
        );
        data.push({
          geometry: {
            type: "Point",
            coordinates: [
              cityCenter.lng - 2 + Math.random() * 4,
              cityCenter.lat - 2 + Math.random() * 4,
            ],
          },
          count: 30 * Math.random(),
          time: 100 * Math.random(),
        });
      }

      // 构建对应的dataset
      var dataSet = new mapv.DataSet(data);

      // 设置对应的参数
      // https://github.com/huiyan-fe/mapv/blob/master/API.md
      var options = {
        context: "2d", //cesium必须设置画布为2d
        cesium: {
          postRender: true,
          postRenderFrame: 10,
        },
        size: 13,
        gradient: {
          0.25: "rgb(0,0,255)",
          0.55: "rgb(0,255,0)",
          0.85: "yellow",
          1.0: "rgb(255,0,0)",
        },
        max: 60,
        animation: {
          type: "time",
          stepsRange: {
            start: 0,
            end: 100,
          },
          trails: 10,
          duration: 4,
        },
        draw: "heatmap", // 绘制热力图
      };
      // 声明cesium的mapv图层并将其显示到三维球上
      var mapvLayer = new CesiumZondy.Overlayer.MapvLayer(
        map,
        dataSet,
        options
      );
    }
  </script>
</body>

</html>